<template>
  <div class="user">
    <basic-container>
      <avue-crud
        :option="option"
        ref="crud"
        v-model="form"
        :page="page"
        :simple-page="true"
        @size-change="sizeChange"
        @current-change="currentChange"
        :table-loading="listLoading"
        @search-change="handleFilter"
        @search-reset="handleRefreshChange"
        @refresh-change="handleRefreshChange"
        :before-open="handleOpenBefore"
        :data="list"
      >
        <template slot-scope="scope" slot="create_timeSearch">
          <el-date-picker
            v-model="searchDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </template>
        <template slot="figure_id" slot-scope="scope">
          <span v-if="scope.row.figure_id" class="underline" @click="getDetail(scope.row.figure_id)">
            {{scope.row.figure_id}}
          </span>
          <span v-else>无</span>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="showAuditEdit(scope.row)"
            >编辑认证
          </el-button>
          <el-button
            type="text"
            icon="el-icon-edit"
            v-if="scope.row.status > 2"
            @click="cancelAudit(scope.row)"
            >取消认证
          </el-button>
          <el-button
            type="text"
            icon="el-icon-edit"
            v-if="!scope.row.pay_status && scope.row.status > 2"
            @click="showAuditVipEdit(scope.row)"
            >转为会员
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog
      :visible.sync="dialogDetail"
      title="人物详情">
      <div class="dialog-main-tree">
        
        <avue-form
          ref="form"
          v-model="detail"
          :option="detailOption"
        >
        </avue-form>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogAudit"
      title="处理申请">
      <div class="dialog-main-tree">
        <avue-radio v-model="audit" :dic="dic"></avue-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAudit = false">取 消</el-button>
        <el-button type="primary" @click="submitAudit">确认</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogAuditVip"
      title="升级会员">
      <div class="dialog-column">
        <avue-radio v-model="auditVip" :dic="dicVip"></avue-radio>
      </div>
      <div class="dialog-column">
        <avue-radio v-model="auditVipTime" :dic="dicVipTime"></avue-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAuditVip = false">取 消</el-button>
        <el-button type="primary" @click="submitAuditVip">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchAuthList, auditApply, auditApplyVip, cancelAuditAuth } from "@/api/admin/staff";
import { getSingle } from "@/api/admin/figure";


import { listOption, detailOption } from "@/const/crud/admin/authApply";
import { mapGetters } from "vuex";
import moment from 'moment'

export default {
  data() {
    return {
      option: listOption,
      detailOption: detailOption,
      dialogDetail: false,
      dialogAudit: false,
      dialogAuditVip: false,
      detail: {},
      dic:[{
        label:'普通认证',
        value: 3
      },{
        label:'高级认证',
        value: 4
      }],
      dicVip:[{
        label:'VIP',
        value: 1
      },{
        label:'SVIP',
        value: 2
      }],
      dicVipTime:[{
        label:'6个月',
        value: 6
      },{
        label:'12个月',
        value: 12
      }],
      audit: 0,
      auditVip: 1,
      auditVipTime: 6,
      auditId: 0,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条,
        isAsc: false //是否倒序
      },
      searchDate: '',
      list: [],
      listLoading: true,
      form: {}
    };
  },
  computed: {
    ...mapGetters(["permissions", "access_token"])
  },
  watch: {
  },
  filters: {
    compareTime: function (value) {
      return moment(value).isBefore(moment())?'已到期':value
    }
  },
  created() {
    this.getList(this.page);
    // this.sys_user_add = this.permissions["sys_user_add"];
    // this.sys_user_edit = this.permissions["sys_user_edit"];
    // this.sys_user_del = this.permissions["sys_user_del"];
  },
  methods: {
    getList(page, params) {
      this.listLoading = true;
      fetchAuthList(
        Object.assign(
          {
            page: page.currentPage,
            size: page.pageSize
          },
          params
        )
      ).then(response => {
        this.list = response.data.data.data;
        this.page.total = response.data.data.count || '0';
        this.listLoading = false;
      });
    },
    getDetail(id){
      getSingle({id:id}).then(response => {
        this.detail = response.data.data
        this.dialogDetail = true
      });
    },
    showAuditEdit(row){
      this.dialogAudit = true
      this.auditId = row.id
      this.audit = row.status
      if(row.status === 300){
        this.audit = 3
      }
      if(row.status === 400){
        this.audit = 4
      }
    },
    showAuditVipEdit(row){
      this.dialogAuditVip = true
      this.auditId = row.id
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getList(this.page);
    },
    currentChange(current) {
      this.page.currentPage = current;
      this.getList(this.page);
    },
    handleFilter(param, done) {
      this.page.currentPage = 1;
      const qDate = {}
      if(this.searchDate){
        qDate.start = moment(this.searchDate[0]).format("YYYY-MM-DD HH:mm:ss")
        qDate.end = moment(this.searchDate[1]).format("YYYY-MM-DD HH:mm:ss")
      }
      this.getList(this.page, Object.assign(param, qDate));
      done();
    },
    handleRefreshChange() {
      this.searchDate = ''
      this.getList(this.page);
    },
    handleOpenBefore(show, type) {
      show();
    },
    handleUpdate(row, index) {
      this.$refs.crud.rowEdit(row, index);
    },
    submitAudit() {
      auditApply({id: this.auditId, status: this.audit}).then(() => {
        this.getList(this.page);
        this.$notify.success("修改成功");
        this.dialogAudit = false
      })
    },
    submitAuditVip(){
      auditApplyVip({id: this.auditId, status: this.auditVip, time: this.auditVipTime}).then(() => {
        this.getList(this.page);
        this.$notify.success("修改成功");
        this.dialogAudit = false
      })
    },
    update(row, index, done, loading) {
      delete this.form.create_time;
      // putStaff(this.form)
      //   .then(() => {
      //     this.getList(this.page);
      //     done();
      //     this.$notify.success("修改成功");
      //   })
      //   .catch(() => {
      //     loading();
      //   });
    },
    cancelAudit(row) {
      this.$confirm("此操作将取消用户的认证资格/VIP资格/关联人物的一切信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        cancelAuditAuth({ userId: row.user_id, figureId: row.figure_id })
          .then(() => {
            this.getList(this.page);
            this.$notify.success("取消成功");
          })
          .catch(() => {
            this.$notify.error("取消失败");
          });
      });
    },
    handleview(data, index) {
      this.$refs.crud.rowView(data, index);
    },
  }
};
</script>
<style lang="less" scoped>
  .el-dialog__body {
    padding: 0 auto;
  }
  .underline {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
  }
  .dialog-column {
    margin: 10px 0;
  }
</style>